.chapter-list-box{
    display: grid;
    flex-wrap: wrap;
    justify-content: space-around;
}

.chapter-list-box.block{
    display: block;
}
// 4k屏幕
@media only screen and (min-width: 4096px) {
    .chapter-list-box {
        margin: 2rem auto;
        padding: 0 6rem;
        grid-template-columns: repeat(auto-fill, 16rem);
        grid-gap: 3rem 3rem;

        &-item {
            line-height: 14rem;
            border-radius: 1.4rem;
            font-size: 2rem;
        }
    }
}
// 2k屏幕
@media only screen and (max-width: 4095px) and (min-width: 2560px) {
    .chapter-list-box {
        margin: 2rem auto;
        padding: 0 6rem;
        grid-template-columns: repeat(auto-fill, 16rem);
        grid-gap: 3rem 3rem;

        &-item {
            line-height: 14rem;
            border-radius: 1.4rem;
            font-size: 2rem;
        }
    }
}
// 1080p屏幕
@media only screen and (max-width: 2559px) and (min-width: 1920px) {
    .chapter-list-box {
        margin: 1rem auto;
        padding: 0 6rem;
        grid-template-columns: repeat(auto-fill, 16rem);
        grid-gap: 1rem 1rem;

        &-item {
            line-height: 14rem;
            border-radius: 1.4rem;
            font-size: 2rem;
        }
    }
}
// 平板
@media only screen and (max-width: 1919px) and (min-width: 1200px) {
    .chapter-list-box {
        margin: 1rem auto;
        padding: 0 6rem;
        grid-template-columns: repeat(auto-fill, 16rem);
        grid-gap: 1rem .1rem;

        &-item {
            line-height: 14rem;
            border-radius: 1.4rem;
            font-size: 2rem;
        }
    }
}
// 平板竖屏
@media only screen and (max-width: 1199px) and (min-width: 769px) {
    .chapter-list-box {
        margin: 2rem auto;
        padding: 0 1rem;
        grid-template-columns: repeat(auto-fill, 12rem);
        grid-gap: 1.4rem .1rem;

        &-item {
            line-height: 14rem;
            border-radius: 1.4rem;
            font-size: 2rem;
        }
    }
}

@media only screen and (max-width: 768px) and (min-width: 390px) {
    .chapter-list-box {
        margin: 1rem auto;
        padding: 0 1rem;
        grid-template-columns: repeat(auto-fill, 9rem);
        grid-gap: .6rem .1rem;

        &-item {
            line-height: 10rem;
            border-radius: 1.2rem;
            font-size: 1.6rem;
        }
    }
}

@media only screen and (max-width: 389px) {
    .chapter-list-box {
        margin: .8rem auto;
        padding: 0 1rem;
        grid-template-columns: repeat(auto-fill, 8rem);
        grid-gap: .6rem 1rem;

        &-item {
            line-height: 7rem;
            border-radius: 1rem;
            font-size: 1.4rem;
        }
    }
}

